<!-- 人工智能排行版 -->

<template>
    <div class="ranking-list">
      <div class="list-item py-10 flex justify-between" v-for="item in rankingData" :key="item.id">
        <div class="left flex felx-col">
          <img class="logo" :src="item.logo" alt="logo"/>

          <div class="flex">
            <strong class="name font-28 textColor mb-6 ">{{ item.name }}</strong>
            <!-- <span class="code font-20 text-grey">{{ item.code }}</span> -->
          </div>
        </div>
        <div class="middle flex items-center justify-center">
            <img class="center-img" :src="getChangeRatioImage(item.change)">

          <!-- <k-line-charts :chartData="item.klineData" /> -->
        </div>
        <div class="flex  right flex-col items-end">
          <strong class="price font-28 textColor mb-6 ">${{ formatPrice(item.price) }}</strong>
          <span class="change font-20" :class="{'up': item.change >= 0, 'down': item.change < 0}">
            {{ item.change >= 0 ? '+' : '' }}{{ item.change }}%
          </span>
        </div>
      </div>
    </div>
  </template>

  <script>
  import KLineCharts from '@/components/kline-charts'

  export default {
    name: 'RankingList',
    components: {
      KLineCharts
    },
    props: {
      rankingData: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      formatPrice(price) {
        return price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
      },
      getChangeRatioImage(changeRatio){
            return changeRatio > 0 ? require('@/assets/image/market/hot.png') : require('@/assets/image/market/hot.png');
        }
    }
  }
  </script>

  <style lang="scss" scoped>
  .ranking-list {
    padding: 2rem;
    background: #000;

    .list-item {
      // display: flex;
      // align-items: center;
      // justify-content: space-between;
      // padding: 1rem 0;

      .left {
      //   display: flex;
      //   align-items: center;
        gap: 1rem;
        width: 12rem;

        .logo {
          width: 2.5rem;
          height: 2.5rem;
        }

        .info {
          // .name {
          //   color: #FFFFFF;
          //   margin-bottom: 0.25rem;
          // }

          // .code {
          //   color: #999999;
          // }
        }
      }

      .middle {
        flex: 1;
        height: 3rem;
        margin: 0 2rem;
      }

      .right {
      //   width: 8rem;
      //   text-align: right;

        .price {
          // color: #FFFFFF;
          // margin-bottom: 0.25rem;
        }

        .change {
          &.up {
            color: #2abc5a;
          }

          &.down {
            color: #c7697f;
          }
        }
      }
    }
  }
  </style>
